<template>
  <!-- 交易记录页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_"> 交易记录</view>
      <view class="right_"></view>
    </view>
    <view class="xian"></view>
    <!-- 无交易记录 -->
    <view class="wu_Huo" v-if="data.length < 1">
      <image src="../../imges/wuhuodong.png" mode="aspectFill"></image>
      <text>暂无交易记录</text>
    </view>
    <view v-if="data.length > 0" class="content">
      <view class="records" v-for="item in data">
        <view class="left">
          <!-- 类型 = 0,7,8,9 -->
          <view
            v-if="
              item.relationType == 0 ||
              item.relationType == 7 ||
              item.relationType == 8 ||
              item.relationType == 9
            "
          >
            <image
              src="../../imges/jiaoyi1.png"
              mode="aspectFill"
              v-if="item.payType == 0"
            ></image>
            <image
              src="../../imges/tx.png"
              mode="aspectFill"
              v-if="item.payType == 1"
            ></image>
            <image
              src="../../imges/tuikuan.png"
              mode="aspectFill"
              v-if="item.payType == 2"
            ></image>
            <image
              src="../../imges/tuikuan.png"
              mode="aspectFill"
              v-if="item.payType == 3"
            ></image>
            <!-- <image
				  src="../../imges/cz.png"
				  mode="aspectFill"
				  v-if="item.payType == 4"
				></image> -->
            <image
              src="../../imges/cz.png"
              mode="aspectFill"
              v-if="item.payType == 5"
            ></image>
            <image
              src="../../imges/jiaoyi.png"
              mode="aspectFill"
              v-if="item.payType == 6"
            ></image>
            <image
              src="../../imges/fhb.png"
              mode="aspectFill"
              v-if="item.payType == 7"
            ></image>
            <image
              src="../../imges/shb.png"
              mode="aspectFill"
              v-if="item.payType == 8"
            ></image>
            <image
              src="../../imges/thhb.png"
              mode="aspectFill"
              v-if="item.payType == 9"
            ></image>
            <image
              src="../../imges/hl.png"
              mode="aspectFill"
              v-if="item.payType == 10"
            ></image>
          </view>
          <!-- 类型 = 1,2,3 -->
          <view
            v-if="
              item.relationType == 1 ||
              item.relationType == 2 ||
              item.relationType == 3
            "
          >
            <image
              src="../../imges/fhb.png"
              mode="aspectFill"
              v-if="item.payType == 1"
            ></image>
            <image
              src="../../imges/shb.png"
              mode="aspectFill"
              v-if="item.payType == 2"
            ></image>
            <image
              src="../../imges/thhb.png"
              mode="aspectFill"
              v-if="item.payType == 3"
            ></image>
            <image
              src="../../imges/hl.png"
              mode="aspectFill"
              v-if="item.payType == 4"
            ></image>
          </view>
          <!-- 会费 -->
          <view v-if="item.relationType == 5">
            <image src="../../imges/hf.png" mode="aspectFill"></image>
          </view>
        </view>
        <view class="right">
          <view class="r-l">
            <view class="text">{{ item.topic }}</view>
            <!--  -->
            <view class="bottom">
              {{ timeReturn(item.createTime) }}
              <image
                src="../../imges/secces.png"
                mode=""
                v-if="item.payWay == 1"
              ></image>
              <image
                src="../../imges/qb.png"
                mode=""
                v-if="item.payWay == 0"
              ></image>
              <image
                src="../../imges/zfb.png"
                mode=""
                v-if="item.payWay == 2"
              ></image>
            </view>
          </view>
          <view style="text-align: right">
            <view :class="[item.account > 0 ? 'shouru' : 'zhichu']">
              {{ item.account > 0 ? "+" + item.account : item.account }}
            </view>
            <view class="time" v-if="item.isAccount != 1">
              {{ item.estimatedTimeStr }}
            </view>
            <view
              class="time"
              v-if="item.payType == 1 && item.notReceivedAmount > 0"
            >
              {{ "手续费" + item.notReceivedAmount + "元" }}
            </view>
          </view>
          <!-- <view class="zhichu" v-if="item.payType == 6 || item.payType == 1">
            {{ item.account }}
          </view> -->
        </view>
      </view>
    </view>
    <!-- <view class="more" v-show="more">
			<text>查看更多</text>
			<image src="../../imges/xiam.png" mode=""></image>
		</view> -->
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      curpage: 1,
      more: false,
      data: [],
      pageNum: 1,
      wudata: true,
    };
  },
  onReachBottom() {
    // console.log(123)
    // this.more = true
    // this.pageNum++;
    // this.jiaoyiList();
    if (this.wudata) {
      uni.showLoading({
        title: "加载中",
      });
      this.pageNum++;
      this.jiaoyiList();
    }
  },
  onPullDownRefresh() {
    setTimeout(() => {
      this.data = [];
      this.pageNum = 1;
      this.jiaoyiList();
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 1500,
        icon: "none",
      });
    }, 1000);
  },
  onLoad() {
    this.jiaoyiList();
  },
  computed: {
    timeReturn() {
      return function (value) {
        if (value) {
          return value.substring(5);
        } else {
          return value;
        }
      };
    },
  },
  methods: {
    fanLastPage() {
      //返回上一页
      window.history.go(-1);
    },
    jiaoyiList() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/home/expenseCalendars?Uid=",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageNumber: this.pageNum,
            pageSize: 10,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            if (
              that.pageNum > 1 &&
              res.data.data.actAccountRecord.rows.length > 0
            ) {
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              that.data = [
                ...that.data,
                ...res.data.data.actAccountRecord.rows,
              ];
            } else if (that.pageNum == 1) {
              that.data = res.data.data.actAccountRecord.rows;
              if (res.data.data.actAccountRecord.rows.length < 10) {
                that.wudata = false;
                return false;
              }
            } else if (
              that.pageNum > 1 &&
              res.data.data.actAccountRecord.rows.length == 0
            ) {
              uni.showToast({
                title: "没有更多数据了",
                duration: 2000,
                icon: "none",
              });
              that.wudata = false;
            }
            // if (res.data.data.actAccountRecord.rows.length < 1) {
            //   uni.showToast({
            //     title: "没有更多数据了",
            //     duration: 2000,
            //     icon: "none",
            //   });
            //   that.wudata = false;
            // }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-top: 92rpx;
  height: 101vh;
  box-sizing: border-box;
  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }
}
.xian {
  height: 1rpx;
  background-color: #eeeeee;
}
.wu_Huo {
  margin-top: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 320rpx;
    height: 260rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}
.content {
  padding-top: 60rpx;
}
.records {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 52rpx;
  box-sizing: border-box;
  // margin-bottom: 27rpx;
  .left {
    width: 100rpx;
    height: 120rpx;
    margin-right: 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }
  .right {
    width: 571rpx;
    // height: 120rpx;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    padding: 14rpx 0 20rpx 0;
    padding-right: 60rpx;
    // padding-bottom: 0rpx;
    border-bottom: 1rpx solid #eeeeee;
    .r-l {
      display: flex;
      // height: 80rpx;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 6rpx;
      .text {
        max-width: 390rpx;
        font-size: 28rpx;
        color: #333333;
        font-weight: bold;
        // margin-bottom: 5rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .bottom {
        font-size: 26rpx;
        color: #333333;
        display: flex;
        align-items: center;
        // margin-bottom: 5rpx;
        image {
          margin-left: 20rpx;
          width: 35rpx;
          height: 28rpx;
        }
      }
    }
    .shouru {
      font-size: 40rpx;
      color: #d18b19;
      font-weight: bold;
    }
    .zhichu {
      font-size: 40rpx;
      color: #333333;
      font-weight: bold;
    }
    .time {
      font-size: 24rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: right;
      color: #999999;
      line-height: 33rpx;
    }
  }
}
.more {
  width: 100%;
  height: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  color: #333333;
  image {
    width: 28rpx;
    height: 14rpx;
    margin-left: 10rpx;
  }
}
</style>
